<template>
    <div class="balance_detail">
        <van-nav-bar title="红包详情" left-arrow fixed @click-left="onClickLeft" :class="{ scrolled: isScrolled }"/>
        <div class="balance_detail_top">
        </div>
        <div class="red_top">
            <img src="../../images/mine/red_logo.png" alt="">
            <div class="red_time">{{ redList.time }}</div>
            <div class="red_title">{{ redList.title || 0}} <span>元</span></div>
            <div class="red_msg">{{ redList.tip_msg }}</div>
            <!-- <div class="red_time">666</div>
            <div class="red_title">{{ redList.title || 0}} <span>元</span></div>
            <div class="red_msg">本次拆开7个红包你把啦啦啦</div> -->
        </div>
        <div class="balance_detail_content">
            <!-- v-model="loading" :finished="finished" -->
            <van-list  finished-text="没有更多了">
                <div class="balance_list" v-for="(item, index) in redList.items" :key="index">
                    <div class="balance_list_left">
                        <img src="../../images/mine/red_icon2.png" alt="">
                        <div>{{ item.name }}</div>
                        <!-- <div>2023-10-20 10:20:00</div> -->
                    </div>
                    <div class="balance_list_right">+{{ item.amount || 0 }}</div>
                </div>
            </van-list>
        </div>
    </div>
</template>
<script>
import { parseTime } from '@/tool/methods'
export default {
    name: 'balance',
    data() {
        return {
            days: "本月",
            dayShow: false,
            minDate: new Date(1930, 0, 1),
            maxDate: new Date(2999, 10, 1),
            currentDate: new Date(),
            loading: false,
            finished: false,
            notifyList: [],
            redShow: true,
            isshow: null,
            isshowOpen: null,
            rxImg: require('../../images/mine/amt_icon.gif'),
            timer: null,
            setImage: null,
            isShowAmt: true,
            isFadingOut: false, // 控制消失动画的状态
            isHidden: false, // 控制容器的显示与隐藏
            isScrolled:false,
            redList:{}
        }
    },
    created() {
        this.redList=JSON.parse(localStorage.getItem('redList'))
    },
    beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
    
  },
    mounted() {
        window.addEventListener("scroll", this.handleScroll);
    },

    // 关闭定时器
    destroyed() {
        clearInterval(this.timer)
    },
    methods: {
        handleScroll() {
      // console.log(window.scrollY);

      this.isScrolled = window.scrollY > 26;
    },
        loadImg(url, callback) {
            var img = new Image();
            img.src = url;
            img.onload = function () {//图片预加载
                callback(img);
            };
        },

        setImg(img) {
            this.rxImg = "url(" + img.src + ")" + "no-repeat  center -50px/ 92% #152348"
        },
        openRedEnvelope() {
            this.isShowAmt = false
            this.timer = setInterval(() => {
                this.rxImg = require('../../images/mine/amt_icon.gif') + '?' + Math.random()//添加随机数
                this.loadImage(this.bgGif, this.setImage)
            }, 700)
            // 请求接口
            clearInterval(this.timer)
            setTimeout(() => {
                this.isshow = false
                this.isHidden = true;
                setTimeout(() => {
                    this.startAnimation()
                }, 50)
            }, 1000)


        },
        startAnimation() {
            // this.isFadingOut = true; // 开始消失动画
            // this.isHidden = true; // 确保容器可见
            // 在动画结束后重置状态
            this.isFadingOut = true;
            setTimeout(() => {

                this.isFadingOut = false; // 重置状态
                this.isHidden = false;
                this.redShow = false
            }, 3000); // 动画持续时间
        },
        checkTime() {
            const now = new Date();
            const hours = now.getHours(); // 获取当前小时
            // 判断当前时间是否在 19:00 到 21:00 之间
            if (hours >= 14 && hours < 21) {
                this.isshow = true;
                this.isshowOpen = false
            } else {
                this.isshowOpen = true
                this.isshow = false;
            }
        },
        closeOverlay() {
            this.redShow = false; // 隐藏遮罩层
            this.isshow = false;  // 隐藏红包显示
            this.isshowOpen = false
            clearInterval(this.timer)
        },
        openRed() {
            this.redShow = true; // 隐藏遮罩层
            this.checkTime()
        },
        onClickLeft() {
            this.$router.back()
        },
        onConfirmDay(val) {
            this.currentDate = parseTime(val, '{y}-{m}-{d}')
            this.days = this.currentDate
            // this.year = this.currentDate.split('-')[0]
            // this.month = this.currentDate.split('-')[1]
            // this.day = this.currentDate.split('-')[2]
            this.dayShow = false
            // this.page = 1
            // this.fansList = []
            // this.onLoad()
        },
        onCancelDay() {
            this.dayShow = false
            // this.days = null
            this.days = '本月'
            // this.selectedItems[2]=false
            // this.year = ''
            // this.month = ''
            // this.day = ''
            // this.page = 1
            // this.fansList = []
            // this.onLoad()
        },
        onLoad() {

        }
    }
}
</script>
<style lang="scss" scoped>
.balance_detail {
    padding-top: 46px;
    // background-color: #F2F4F5;
    // height: calc(100vh - 46px);
    position: relative;

    ::v-deep .van-hairline--bottom::after {
        border: none;
    }

    ::v-deep .van-icon {
        color: #fff;
    }

    ::v-deep .van-nav-bar__title {
        color: #fff;
    }

    ::v-deep .van-nav-bar__arrow {
        font-size: 20px;
    }

    ::v-deep .van-nav-bar__text {
        color: #fff;
    }

    ::v-deep .van-nav-bar {
        background: transparent;
        position: fixed; // 改为固定定位
        top: 0; // 添加这行
        left: 0; // 添加这行
        right: 0; // 添加这行
        z-index: 1; // 添加这行，确保它在其他元素之上

        // position: fixed;
        &.scrolled {
            background-color: #ffffff; // 或者你想要的任何颜色

            .van-nav-bar__title,
            .van-icon,
            .van-nav-bar__text {
                color: #333; // 滚动后变为黑色
            }
        }
    }

    .balance_detail_top {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 2.5rem;
        background: url('../../images/mine/red_bg3.png') no-repeat center;
        position: relative;
        /* 相对定位 */
        top: -2rem;
        /* 根据你的 NavBar 高度调整，Vant UI 默认 NavBar 高度为 46px */
        width: 100%;
        background-size: cover;
        color: #333;
        text-align: center;
        // padding-top: 1.5rem;
        box-sizing: border-box;

    }

    .red_top {
        width: 100%;
        text-align: center;
        color: #333;
        margin-top: -1.72rem;
        margin-bottom: .3rem;
        img{
            width: 2.64rem;
            height: 2.64rem;
        }
        .red_time {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: .28rem;
            color: #666666;
            line-height: .4rem;
            // text-align: right;
            font-style: normal;
        }

        .red_title {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: .72rem;
            color: #FF6200;
            line-height: 1rem;
            // text-align: right;
            font-style: normal;

            span {
                font-size: .4rem;
                color: #FF6200;
                line-height: .52rem;
                // text-align: right;
                font-style: normal;
            }
        }

        .red_msg {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: .28rem;
            color: #333333;
            line-height: .4rem;
            // text-align: right;
            margin-top: .08rem;
            font-style: normal;
        }
    }

    .balance_detail_content {
        width: 100%;
        // height: calc(100vh - 4rem);
        margin: 0 auto;
        // border-radius: .2rem;
        // border-top-right-radius: .2rem;
        background: #fff;
        padding-top: .4rem;
        box-sizing: border-box;
        // margin-top: -1.9rem;
        position: relative;
        z-index: 1;
        padding: .2rem;
        box-sizing: border-box;

        .balance_list {
            margin-top: .2rem;
            padding-bottom: .2rem;
            border-bottom: 1px solid #E5E5E5;
            display: flex;
            justify-content: space-between;

            .balance_list_left {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: .28rem;
                color: #333333;
                line-height: .4rem;
                // text-align: left;
                font-style: normal;
                display: flex;
                img{
                    width: .6rem;
                    height: .6rem;
                    vertical-align: middle;
                }
                div{
                    margin-top: .1rem;
                }
               
            }

            .balance_list_right {
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: .32rem;
                color: #333;
                line-height: .44rem;
                // text-align: center;
                font-style: normal;
            }
        }

    }
}
</style>